<template>
  <div v-if="hasResult">
    <div class="activity-banner" v-if="item.category == 0" @click="EventTarget(item)">
      <!-- <img class="count-close" src="./img/count-close.png" @click="countClose"> -->
      <div class="banner-box">
        <div class="banner-title">{{ item.des }}</div>
        <div class="banner-tips">即将过期</div>
      </div>
      <uni-countdown
        ref="countdown"
        class="custom-coutdown"
        :show-day="false"
        :font-size="20"
        :hour="hour"
        :minute="min"
        :second="sec"
        color="#FFFFFF"
        @timeup="countdownTimeup"
      />
      <img class="count-btn" src="./img/count-btn.png" @click="EventTarget(item)" />
    </div>
    <div v-else>
      <div class="normal-banner" v-if="false">
        <image
          class="count-bg"
          mode="widthFix"
          :src="item.imageLinks"
          @click="EventTarget(item)"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getMallListApi } from "@/http/api";
export default {
  name: "activity-banner",
  data() {
    return {
      isBannerShow: false,
      item: {},
      hasResult: false,
      hour: 1,
      min: 0,
      sec: 0,
    };
  },
  mounted() {
    window.addEventListener("beforeunload", this.handleBeforeUnload);
    window.addEventListener("unload", this.handleBeforeUnload);
    // 获取ad信息
    getMallListApi({
      pageNum: 1,
      pageSize: 999,
      status: 1,
      projectId: 97,
      adPosition: 0,
    }).then((res) => {
      if (res.code == 200 && res.rows.length > 0) {
        this.item = res.rows[0];
        this.hasResult = true;
        // 继续剩余时间
        let countdownObj = uni.getStorageSync("activityCountdown");
        if (countdownObj) {
          let { countdown, timeStamp } = countdownObj;
          let nowTimeStamp = new Date().getTime();
          let gap = countdown - (nowTimeStamp - timeStamp) / 1000; // 秒差值
          // 间隔小于1小时继续计时,否则准备重新计时
          if (gap > 0) {
            // 计算时间差
            this.hour = Math.floor(gap / 3600);
            this.min = Math.floor((gap - this.hour * 3600) / 60);
            this.sec = gap - this.hour * 3600 - this.min * 60;
          } else {
            // 超过时间差重新弹窗
            this.hour = 1;
            this.min = 0;
            this.sec = 0;
          }
        } else {
          this.hour = 1;
          this.min = 0;
          this.sec = 0;
        }
      } else {
        this.hasResult = false;
      }
    });
  },
  methods: {
    countClose() {
      this.isBannerShow = false;
    },
    EventTarget(item) {
      if (item.skipLinks && item.skipLinks != "") {
        uni.setStorage({
          key: "activityCountdown",
          data: {
            countdown: 3600,
            timeStamp: new Date().getTime(),
          },
        });
        window.location.href = item.skipLinks;
      }
    },
    handleBeforeUnload(e) {
      if (this.$refs.countdown.seconds > 0) {
        uni.setStorage({
          key: "activityCountdown",
          data: {
            countdown: this.$refs.countdown.seconds,
            timeStamp: new Date().getTime(),
          },
        });
      } else {
        uni.setStorage("activityCountdown", false);
      }
    },
    countdownTimeup() {
      uni.setStorage("activityCountdown", false);
    },
  },
  destroyed() {
    window.removeEventListener("beforeunload", this.handleBeforeUnload);
    window.removeEventListener("unload", this.handleBeforeUnload);
  },
};
</script>

<style lang="scss" scoped>
.activity-banner {
  position: fixed;
  width: 100%;
  max-width: 750px;
  bottom: var(--window-bottom);
  box-sizing: border-box;
  background: url("./img/count-bg.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 34rpx 20rpx 40rpx;
}

.count-close {
  position: absolute;
  right: 0rpx;
  width: 30rpx;
  height: 29rpx;
  top: -30rpx;
}

.banner-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #ffffff;
}

.banner-title {
  font-size: 36rpx;
  font-weight: bold;
}

.banner-tips {
  font-size: 26rpx;
}

.count-btn {
  width: 200rpx;
  height: 72rpx;
}

.custom-coutdown {
  ::v-deep .uni-countdown__number {
    background: linear-gradient(-3deg, #ff927b, #fd312a);
    border: 1px solid;
    border-radius: 5rpx;
  }

  ::v-deep .uni-countdown__splitor span {
    color: #ffffff;
  }
}

.normal-banner {
  position: fixed;
  width: 100%;
  max-width: 750px;
  bottom: var(--window-bottom);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  .count-bg {
    width: 100%;
  }
}
</style>
